<!-- 1-彩色柱形图表 -->
<template>
  <div class="pieChartBox" style="width: 100%; height: 3rem" :ref="id"></div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
    },
    resArr: {
      type: Array,
      default: [],
    },
  },
  watch: {
    id: {
      handler(newValue) {
        this.id = newValue;
        this.showChart();
      },
      deep: true,
      immediate: true,
    },
  },
  data: function () {
    return {
      titleName: ["活线管理", "稳健理财", "财富成长", "养老规划"],
      num: [], //占比
      total: [], //总数
    };
  },
  //页面载入之前执行
  // 每次加载都执行
  activated: function () {
    // this.showChart()
  },
  methods: {
    showChart() {
      // let myChart = echarts.init(document.getElementById(this.id));
      // 基于准备好的dom，初始化echarts实例

      // 加this.$nextTick(()=>{})可取到this.$refs值
      this.$nextTick(() => {
        let myChart = this.$echarts4.init(this.$refs[`${this.id}`]);
        myChart.setOption(this.getOption());
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });

      // this.$refs.leftChart
    },
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 750);
      return res * fontSize;
    },
    getOption() {
      let resNew;
      if (this.resArr) {
        this.total = [];
        this.num = [];
        resNew = this.resArr.map((item) => {
          this.num.push(item.num);
          this.total.push(item.total);
          return {
            num: item.num,
            total: item.total,
          };
        });
      }
      let total = this.total;
      let num = this.num;
      if (this.resArr.length == 5) {
        this.titleName = [
          "活线管理",
          "稳健理财",
          "财富成长",
          "养老规划",
          "其他",
        ];
        this.num.length = 5;
      } else {
        this.titleName = ["活线管理", "稳健理财", "财富成长", "养老规划"];
        this.num.length = 4;
      }
      let option = {
        tooltip: {
          show: false, //取消点击事件
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{a}<br/>{b}: {c}%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false, //去掉网格线
            },
            data: this.titleName,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 0,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666",
                fontSize: 10,
              },
            },
          },
        ],
        legend: {
          show: true,
          // silent: true, //取消图例上的点击事件
          selectedMode: false,
          orient: "vertical",
        },
        yAxis: [
          {
            axisLabel: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 0,
              },
            },
            splitLine: {
              show: false, //去掉网格线
              lineStyle: {
                type: "dashed",
                color: "#ddd",
              },
            },
          },
        ],
        series: [
          {
            label: {
              normal: {
                show: true,
                fontSize: 8,
                formatter: function (params) {
                  //标签内容
                  let str = "";
                  // 同志们 简化一下哈~
                  if (
                    params.value.length >= 13 &&
                    total[params.dataIndex].length >= 13
                  ) {
                    str =
                      "{a|" +
                      params.value.substring(0, 13) +
                      "..." +
                      "%}\n{b|" +
                      total[params.dataIndex].substring(0, 13) +
                      "..." +
                      "}";
                  } else if (
                    params.value.length >= 13 &&
                    total[params.dataIndex].length < 13
                  ) {
                    str =
                      "{a|" +
                      params.value.substring(0, 13) +
                      "..." +
                      "%}\n{b|" +
                      total[params.dataIndex] +
                      "}";
                  } else if (
                    params.value.length < 13 &&
                    total[params.dataIndex].length >= 13
                  ) {
                    str =
                      "{a|" +
                      params.value +
                      "%}\n{b|" +
                      total[params.dataIndex].substring(0, 13) +
                      "..." +
                      "}";
                  } else {
                    str =
                      "{a|" +
                      params.value +
                      "%}\n{b|" +
                      total[params.dataIndex] +
                      "}";
                  }
                  return str;
                },
                rich: {
                  a: {
                    align: "center",
                    color: "#999",
                    lineHeight: 20,
                    fontSize: 8,
                  },
                  b: {
                    align: "center",
                    fontSize: 8,
                  },
                },
              },
            },
            dataLabels: {
              enabled: true,
              format: "{point.y:.1f}%",
            },
            type: "bar",
            clickable: false,
            barWidth: "30%",
            data: this.num,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 8,
                    fontWeight: 500,
                  },
                  position: "top",
                },
                color: function (params) {
                  var colorList = [
                    "#F7CE00",
                    "#E6694C",
                    "#4BB2F2",
                    "#A25FD2",
                    "#CB9850",
                  ];
                  if (params.value == "0.00") {
                    return "#D9E2F6";
                  } else {
                    return colorList[params.dataIndex];
                  }
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}",
                  formatter: "{b}\n{c}",
                },
                rich: {
                  c: {
                    color: "#999",
                  },
                },
                //柱形图圆角，初始化效果
                barBorderRadius: [5, 5, 5, 5],
              },
            },
            barWidth: 30, //柱图宽度
            barMinHeight: 2, //默认最小高度
          },
        ],
      };
      return option;
    },
  },
};
</script>
